@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

:root {
    --bg-secondary: #343434;
    --slider-shadow: inset 0 1px 1px rgb(47, 47, 47), 0 2px 3px rgb(27, 27, 27);
    --wind-transform: 0vw;

    &.left {
        --wind-transform: -20vw;
    }

    &.right {
        --wind-transform: 20vw;
    }
}

body {
    background-color: #272b3f;
    color: rgb(255, 255, 255);
    overflow: hidden;
}

//风向
.wrapper {
    background-image: linear-gradient(45deg,
            rgba(8, 211, 172, 0.45) 0%,
            rgba(8, 211, 172, 0.45) 12.5%,
            rgba(62, 29, 50, 0.45) 12.5%,
            rgba(62, 29, 50, 0.45) 25%,
            rgba(54, 55, 67, 0.45) 25%,
            rgba(54, 55, 67, 0.45) 37.5%,
            rgba(47, 81, 85, 0.45) 37.5%,
            rgba(47, 81, 85, 0.45) 50%,
            rgba(23, 159, 137, 0.45) 50%,
            rgba(23, 159, 137, 0.45) 62.5%,
            rgba(16, 185, 155, 0.45) 62.5%,
            rgba(16, 185, 155, 0.45) 75%,
            rgba(31, 133, 120, 0.45) 75%,
            rgba(31, 133, 120, 0.45) 87.5%,
            rgba(39, 107, 102, 0.45) 87.5%,
            rgba(39, 107, 102, 0.45) 100%),
        linear-gradient(135deg, rgb(87, 116, 221), rgb(35, 4, 229));
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    color: #fff;
    width: 240px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 6px;
    z-index: 2;

    .direction-switcher {
        position: relative;
        background-color: var(--bg-secondary);
        border-radius: 10px;
        display: flex;
        padding: 0 3px;
        align-items: center;
        overflow: hidden;

        .slider {
            display: block;
            position: absolute;
            z-index: 1;
            width: calc((100% - 6px) / 3);
            top: 3px;
            transform: translatex(-110%);
            bottom: 3px;
            border-radius: 6px;
            transition: 0.15s ease, transform 0.25s ease-out;
            background-color: var(--bg-button);
            background-image: repeating-linear-gradient(45deg,
                    rgba(118, 118, 118, 0.05) 0px,
                    rgba(118, 118, 118, 0.05) 19px,
                    rgba(59, 59, 59, 0.05) 19px,
                    rgba(59, 59, 59, 0.05) 67px,
                    rgba(195, 195, 195, 0.05) 67px,
                    rgba(195, 195, 195, 0.05) 87px,
                    rgba(121, 121, 121, 0.05) 87px,
                    rgba(121, 121, 121, 0.05) 133px,
                    rgba(250, 250, 250, 0.05) 133px,
                    rgba(250, 250, 250, 0.05) 172px,
                    rgba(106, 106, 106, 0.05) 172px,
                    rgba(106, 106, 106, 0.05) 197px,
                    rgba(151, 151, 151, 0.05) 197px,
                    rgba(151, 151, 151, 0.05) 226px,
                    rgba(219, 219, 219, 0.05) 226px,
                    rgba(219, 219, 219, 0.05) 260px),
                repeating-linear-gradient(45deg,
                    rgba(70, 70, 70, 0.05) 0px,
                    rgba(70, 70, 70, 0.05) 40px,
                    rgba(220, 220, 220, 0.05) 40px,
                    rgba(220, 220, 220, 0.05) 79px,
                    rgba(95, 95, 95, 0.05) 79px,
                    rgba(95, 95, 95, 0.05) 103px,
                    rgba(15, 15, 15, 0.05) 103px,
                    rgba(15, 15, 15, 0.05) 148px,
                    rgba(51, 51, 51, 0.05) 148px,
                    rgba(51, 51, 51, 0.05) 186px,
                    rgba(225, 225, 225, 0.05) 186px,
                    rgba(225, 225, 225, 0.05) 202px,
                    rgba(60, 60, 60, 0.05) 202px,
                    rgba(60, 60, 60, 0.05) 239px,
                    rgba(67, 67, 67, 0.05) 239px,
                    rgba(67, 67, 67, 0.05) 259px),
                repeating-linear-gradient(45deg,
                    rgba(146, 146, 146, 0.05) 0px,
                    rgba(146, 146, 146, 0.05) 40px,
                    rgba(166, 166, 166, 0.05) 40px,
                    rgba(166, 166, 166, 0.05) 54px,
                    rgba(156, 156, 156, 0.05) 54px,
                    rgba(156, 156, 156, 0.05) 71px,
                    rgba(134, 134, 134, 0.05) 71px,
                    rgba(134, 134, 134, 0.05) 95px,
                    rgba(77, 77, 77, 0.05) 95px,
                    rgba(77, 77, 77, 0.05) 111px,
                    rgba(26, 26, 26, 0.05) 111px,
                    rgba(26, 26, 26, 0.05) 153px,
                    rgba(46, 46, 46, 0.05) 153px,
                    rgba(46, 46, 46, 0.05) 202px,
                    rgba(197, 197, 197, 0.05) 202px,
                    rgba(197, 197, 197, 0.05) 216px),
                linear-gradient(90deg, rgb(30, 178, 248), rgb(46, 36, 197));
            box-shadow: var(--slider-shadow);
        }

        input {
            display: none;

            &:nth-of-type(1):checked~.slider {
                transform: translateX(0);
            }

            &:nth-of-type(2):checked~.slider {
                transform: translateX(100%);
            }

            &:nth-of-type(3):checked~.slider {
                transform: translateX(200%);
            }
        }

        label {
            cursor: pointer;
            position: relative;
            user-select: none;
            padding: 10px 15px;
            font-size: 0.8rem;
            z-index: 2;
            width: calc(100% / 3);
        }
    }
}

//雪花描述
.snowflake {
    color: rgb(255, 255, 255);
    position: absolute;
    top: -20px;
    animation: fall linear forwards;
}

@keyframes fall {
    to {
        transform: translateX(var(--wind-transform)) translateY(100vh);
    }
}